<template>
	<view class="transOrderDetail">
		<uni-nav-bar color="#ffffff" background-color="#00aded" :statusBar="true" title="运输订单" fixed="true" left-icon="left" left-text="返回" @clickLeft="back"></uni-nav-bar>
		<view class="noTip" v-if="!transOrderId">
			<text>暂无运单信息</text>
		</view>
		<view class="" v-else>
			<view class="transOrderDetail_top">
				<uni-section title="运单二维码" type="line" titleFontSize="20px">
					<uqrcode ref="uqrcode" canvas-id="qrcode" :value="transOrderItem['transOrderNumber']" :options="{ margin: 10 }" :size="280"></uqrcode>
				</uni-section>
			</view>
			<view class="transOrderDetail_main">
				<uni-section title="运单信息" type="line" titleFontSize="20px">
					<dil-card class="dilCard" @emitEvent="emitEvent" v-bind.sync="options"></dil-card>
				</uni-section>
			</view>
			<view class="transOrderDetail_floot">
				<uni-section title="运单实绩" type="line" titleFontSize="20px">
					<dil-step :stepsList="stepList"></dil-step>
				</uni-section>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			stepList: [],
			options: {
				requestUrl: '',
				requestQuery: {},
				cardSlotList: [],
				columnDataList: [],
				totalNum: 0
			}
		};
	},
	computed: {
		...mapState('common', ['transOrderItem']),
		transOrderId() {
			return this.transOrderItem.transOrderId;
		},
		transOrderNumber() {
			return this.transOrderItem.transOrderNumber;
		}
	},
	onShow() {
		if (this.transOrderId) {
			this.getOrderSection();
			this.getTransResult();
		}
	},

	methods: {
		back() {
			// #ifdef APP-PLUS
			uni.navigateBack();
			// #endif

			// #ifdef H5
			this.$router.back();
			// #endif
		},
		async getOrderSection() {
			let transOrderId = this.transOrderItem.transOrderId;
			let apiId = this.transOrderItem.apiId || 627;
			this.options.requestUrl = '/api/v1/tms/getTransOrderList?apiId=' + apiId;
			this.options.requestQuery = { transOrderId: transOrderId };
		},
		async getTransResult() {
			const res = await this.$myRequest({
				url: '/api/v1/tms/getTransResult',
				data: { transOrderId: this.transOrderItem.transOrderId }
			});
			this.stepList = res.data.data;
			console.log('res: ', res.data.data);
		},
		emitEvent(eventName, cardItem) {
			this[eventName](cardItem);
		},
		//vuex
		...mapMutations('common', ['updateTransOrderItem'])
	}
};
</script>

<style lang="scss" scoped>
.transOrderDetail {
	width: 100vw;
	height: 100%;
	background-color: #f5f5f5;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	.noTip {
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 700;
		font-size: 60rpx;
		color: #000;
	}
	&_top {
		width: 100vw;
		height: 100%;
		.uni-section {
			width: 100vw;
			/deep/.uni-section-content {
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	&_main {
		margin-top: 20rpx;
	}
	&_floot {
		width: 100vw;
		background-color: #fff;
		// border: 1px solid #000;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
	}
}
</style>
